<template>
    <li style="padding: 0;" class="relative">
        <i v-if="status" class="point" :style="{left:(padding -20) + 'px'}"></i>
        <p class="depr-name over" :class="checkCurrentPath(dept.deptId)" @click="clickFun(dept)" v-text="dept.name"
           :style="{'padding-left':padding + 'px'}"></p>
        <i v-if="!dept.childernNotExist" class="drop-down-icon"
           :class="dept.showChildren? 'drop-down-icon-rotate' :'drop-down-icon-rotate-back'"> </i>
        <ul v-if="dept.showChildren ">
            <organization v-for="(deptInfo,key) in  dept.children" :key="key" :dept="deptInfo" :clickFun="clickFun"
                          :padding="padding + 15"></organization>
        </ul>
    </li>
</template>

<script>
  export default {
    name: "Organization",
    props: {
      status:{
        type: Boolean,
        default: function () {
          return false
        }
      },
      dept: {
        type: Object,
        default: function () {
          return {}
        }
      },
      padding: {
        type: Number,
        default: function () {
          return 65
        }
      },
      clickFun: {
        type: Function,
        default: function () {
        }
      }
    },
    methods: {
      checkCurrentPath: function (deptId) {
        if (this.$route.fullPath.indexOf('detail/0?deptId=' + deptId) > -1) {
          return 'menu-active'
        } else {
          return ''
        }
      },
    }
  }
</script>

<style scoped>
    .point{
        transform: rotate(-45deg);
        background: rgba(70,144,245,0.62);
        height: 6px;
        width: 6px;
        position: absolute;
        top: 16px;
    }
    .depr-name {
        text-align: left;
        color:rgba(102,102,102,1);
        font-size: 14px;
    }

    .menu-active{
        color: #4690F5;
        background:rgba(153,153,153,0.1);
    }

    .over:hover {
        color: #4690F5;
        background: #d8d9e0;
    }

</style>
